<template>
	<div class="app-top">
		<div class="top-nav clearfix">
			<div class="top-nav-left">
				<img src="../assets/logo.png">
				<span>百度 | 雅虎 | 新浪 | 谷歌</span>
			</div>

			<div class="top-nav-right">
				<ul>
					<li v-for="option in options">
						<a>{{option}}</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'top',
		data(){
			return {
				options:['登录','注册','关于']
			}
		}
	}
</script>
<style scoped>
	.app-top {
		background: #363636;
		color: #b2b2b2;
		height: 90x;
		line-height: 90px;
		width: 100%;
	}

    .top-nav-left {
    	float: left;
    	width: 50%;
    	height: 90x;
		text-align: center;
    }

	.top-nav-left img {
		height: 45px;
		/*设置垂直对齐方式*/
		 vertical-align:middle;
	}

	.top-nav-left span {
		margin-left: 10%;
	}

	.top-nav-right {
		float: right;
		width: 15%;
		height: 90px;
	}

	.top-nav-right ul  {
		height: 90px;
	}

	.top-nav-right ul li {
		margin-right: 10%;
		float: left;
	}

	.clearfix {
	  overflow: auto;
	  zoom: 1;
	}

</style>